<template>
  <div class="toast" v-show="isShow">
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  props: {
    /*isShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    message: {
      type: String,
      default() {
        return ''
      }
    },*/

  },
  data() {
    return {
      message: '',
      isShow: false,
    }
  },
  methods: {
    /**
     * msg
     * @param message 消息
     * @param duration  显示时间，默认3秒
     */
    msg(message = "默认提示消息", duration = 3000) {
      this.isShow = true;
      this.message = message;
      //duration未传值时，默认显示3秒

      //设置定时器，结束隐藏message
      setTimeout(() => {
        this.isShow = false;
        this.message = '';
      }, duration)
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background-color: rgba(66, 66, 66, 0.8);
  padding: 10px 12px;
  z-index: 9;
}
</style>
